@import "../../style/index.scss";

$width-short: 100px;
$user-border-width: 2px;
$letter-spacing: 1px;

.time-since {
  @include body2;
  @include semiBold;
  height: var(--time-since-height);
  border-radius: calc(var(--time-since-height) / 2);

  margin: 0;
  white-space: nowrap;
  padding-right: var(--default-spacing);
  padding-left: 0;
  position: relative;
  background-color: var(--gray-70);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;

  &--short {
    max-width: $width-short;
  }

  &__tooltip {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
  }

  &__icon {
    box-sizing: border-box;
    background-color: var(--primary);
    border-radius: 50%;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: calc(var(--time-since-height) + #{$user-border-width});
    width: calc(var(--time-since-height) + #{$user-border-width});
    min-width: calc(var(--time-since-height) + #{$user-border-width});
    text-align: center;
    color: var(--static-white);
    text-transform: capitalize;
    border: $user-border-width solid var(--gray-80);
    margin-right: var(--default-spacing-small);
    letter-spacing: $letter-spacing;
  }
  &__time {
    white-space: nowrap;
    overflow: hidden;
    display: block;
    width: 100%;
    text-overflow: ellipsis;
  }
}
